<template>
  <div class="applyrecord">
        <Top title="申请记录" iconShow="1"></Top>
        <div class="applyrecord-content" v-for="(item,index) in applyList" :key="index">
            <div class="applyrecord-content-logo">
                <div class="applyrecord-content-logo-img">
                    <img :src="item.productLogo" alt="">
                </div>
            </div>
            <div class="applyrecord-content-detail">
                <div class="applyrecord-content-detail-top">
                    <div class="applyrecord-content-detail-top-left">
                        <p>{{item.productName}}</p>
                        <div>
                            <ul>
                                <li v-for="(itemC,idx) in item.label" :key="idx">{{itemC}}</li>
                            </ul>
                        </div>
                    </div>
                    <div class="applyrecord-content-detail-top-right">
                        <mt-button type="primary" @click="goDetail(item.productId)">
                             再次申请
                        </mt-button>
                    </div>
                </div>
                <div class="applyrecord-content-detail-mid">
                    <span>¥</span>
                    <span>{{item.quato}}</span>
                    <span>额度范围&nbsp;&nbsp;(元)</span>
                </div>
                <div class="applyrecord-content-detail-bot">
                    <ul>
                        <li>{{item.lendSpeed}}放款</li>
                        <li>参考利率:{{item.dailyInterestRate}}%</li>
                        <li>贷款期限{{item.cycle}}</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- <load-more :tip="('加载中...')" v-if="loadMoreShow"></load-more> -->
        <!-- <load-more :show-loading="false" :tip="('没有更多了')" background-color="#f5f5f5" v-if="noMoreShow"></load-more> -->
    </div>
</template>

<script>
import Vue from 'vue'
import '../../../js/lib/flexble.js'
import common from '../../../common/js/common.js'
import Top from 'components/Header/Header'
import Foot from 'components/Footer/Footer'
import { Indicator, MessageBox } from "mint-ui";
export default {
  name: 'Applyrecord',
  components: { Top,Foot },
  data() {
    return {
      applyList: [],
      pageNum: 1,
      // selectedList: [],
      flag: true,
      noMoreShow: false,
      loadMoreShow: false
    }
  },
  created() {
    var _this = this;
    this.$nextTick(function() {
        window.addEventListener('scroll', onScroll)
    })
    // 判断滚动条位置，加载更多
    function onScroll() {
        var scrollTop = document.body.scrollTop;
        var innerHeight = window.innerHeight;
        var offsetHeight = document.body.offsetHeight;
        if (scrollTop + innerHeight >= offsetHeight) {
            if (_this.flag) {
                if (_this.applyList.length >= 6) {
                    _this.flag = false;
                    _this.getList()
                } else {
                    _this.noMoreShow = true;
                }
            }
        }
    }
  },
  mounted(){
    Vue.http.interceptors.push((request, next) => { //请求拦截器
      //请求前
      request.headers.set('token', common.getCookie('token')); //设置请求头
      Indicator.open('加载中...'); //请求loading
      next((response) => {
        //请求后
        Indicator.close(); //隐藏loading
        return response
      })
    })
    var token = common.getCookie('token');
    this.$http.post('/loansupermarket-app/personal/getApplyListPage', { pageSize: 6, pageNum: 1, token: token }).then(function(response) {
      var resBody = response.data;
      this.applyList = resBody.data;
      //console.log(this.applyList)
      if (resBody.code == '000') {
          if (this.applyList.length > 0) {
            this.applyList.forEach(function(item, idx) {
                item.label = item.label.split(',');
            })
            if (this.applyList.length < 6) {
                this.noMoreShow = true;
            }
          } else {
              MessageBox.alert('没有申请记录！')
          }
      }else if(resBody.code == '444'){
          window.location.href='../user/login.html?history=1';
      }else{
          MessageBox.alert(resBody.mesg);
      }
    })
  },
  methods: {
    goDetail(id) {
        // this.$router.push({ path: '/loanplatformdetail', query: { id: id, status: 2 } })
        window.location.href='../loan/product.html?id='+id+'&status=2';
    },
    getList() {
      var token = common.getCookie('token');
      this.pageNum += 1;
      this.loadMoreShow = true;
      var _this = this;
      setTimeout(function() {
          _this.$http.post("/loansupermarket-app/personal/getApplyListPage", { pageNum: _this.pageNum, pageSize: 6, token: token })
              .then((response) => {
                  if (response.data.code == '000') {
                    _this.flag = true;
                    _this.loadMoreShow = false;
                    var resBody = response.data;
                    if (resBody.data.length > 0) {
                      if (resBody.data.length < 6) {
                          _this.noMoreShow = true;
                          _this.flag = false;
                      }
                      resBody.data.forEach(function(item,index){
                          item.label = item.label.split(',');
                      })
                      _this.applyList = _this.applyList.concat(resBody.data);
                      // _this.applyList.forEach(function(item, idx) {
                      //     item.label = item.label.split(',');
                      // })
                    }
                  }
              })
      }, 500)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../../scss/base.scss';
.applyrecord {
  padding-top: 1.2rem;
  .weui-loadmore_line {
      margin-top: 0.6rem;
  }
  &-content {
    width: 100%;
    height: 3.44rem;
    display: flex;
    margin-top: 0.28rem;
    &-logo {
      flex: 2;
      background: #fff;
      &-img {
          width: 1.2rem;
          height: 1.2rem;
          background-size: cover;
          border-radius: 50%;
          margin: 0.4rem auto;
          overflow: hidden;
          img {
              width: 100%;
              height: 100%;
          }
      }
    }
    &-detail {
      flex: 8;
      background: #fff;
      &-top {
        height: 1.54rem;
        &-left {
          float: left;
          text-align: left;
          width: 5.5rem;
          p {
            text-align: left;
            margin-top: 0.38rem;
            font-size: 0.4rem;
            height: 0.4rem;
          }
          ul {
            margin-top: 0.32rem;
            li {
              float: left;
              width: 1.32rem;
              height: 0.45rem;
              border: 1px solid #959595;
              text-align: center;
              line-height: 0.45rem;
              border-radius: 0.12rem;
              margin-right: 0.13rem;
              color: #959595;
            }
          }
        }
        &-right {
          float: left;
          width: 2.25rem;
          .mint-button {
              margin-top: 0.4rem;
              font-size: 0.36rem;
              height: 0.9rem;
              padding: 0 12px;
          }
        }
    }
    &-mid {
        height: 0.4rem;
        margin-top: 0.3rem;
        text-align: left;
        span:nth-of-type(1) {
            color: $redColor;
            font-size: 0.4rem;
        }
        span:nth-of-type(2) {
            color: $redColor;
            font-size: 0.55rem;
            margin-left: 0.1rem;
        }
        span:nth-of-type(3) {
            color: #959595;
            font-size: 0.3rem;
            margin-left: 0.25rem;
        }
    }
    &-bot {
        ul {
            padding: 0.35rem 0;
            li {
              float: left;
              padding: 0 0.2rem;
              font-size: 0.3rem;
              &:nth-of-type(1) {
                  padding-left: 0;
              }
              &:nth-of-type(2) {
                  border-left: 1px solid #e4e4e4;
                  border-right: 1px solid #e4e4e4;
              }
            }
          }
      }
    }
  }
}

</style>
